<template>
  <div class="score-card">
    <div class="card-header">
      <h2>芝麻分数</h2>
      <div class="date-buttons">
        <button @click="getData('today')">今天</button>
        <button @click="getData('yesterday')">昨天</button>
        <button @click="getData('dayBeforeYesterday')">前天</button>
      </div>
    </div>
    <div class="card-content">
      <p>全国: {{ totalScore }}</p>
      <p>芝麻700以上: {{ score700Above }}</p>
      <p>芝麻650-700: {{ score650To700 }}</p>
      <p>芝麻600-650: {{ score600To650 }}</p>
      <p>芝麻1-600: {{ score1To600 }}</p>
      <p>无芝麻: {{ noScore }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      responseData: {}, // 用于存储从接口返回的数据
    };
  },
  computed: {
    totalScore() {
      return this.responseData.total;
    },
    score700Above() {
      return this.responseData.score700Above;
    },
    score650To700() {
      return this.responseData.score650To700;
    },
    score600To650() {
      return this.responseData.score600To650;
    },
    score1To600() {
      return this.responseData.score1To600;
    },
    noScore() {
      return this.responseData.noScore;
    },
  },
  methods: {
    getData(date) {
      // 在这里调用接口，根据传入的日期参数查询数据
      // 例如，可以使用axios或其他HTTP库来发送异步请求
      // 在请求成功后，将返回的数据赋值给responseData
      // 示例：假设接口返回的数据是一个对象，包含不同日期的芝麻分数
      if (date === 'today') {
        // 调用接口查询今天的数据
        // this.responseData = 返回的数据
      } else if (date === 'yesterday') {
        // 调用接口查询昨天的数据
        // this.responseData = 返回的数据
      } else if (date === 'dayBeforeYesterday') {
        // 调用接口查询前天的数据
        // this.responseData = 返回的数据
      }
    },
  },
};
</script>

<style scoped>
.score-card {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.date-buttons {
  display: flex;
  gap: 10px;
}

.card-content {
  font-size: 16px;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  text-decoration: underline;
  color: blue;
  padding: 0;
}
</style>
